<template>
  <div class="home">
    <a-card>
      <div class="home-top">
        <div class="home-top-hd">
          <span>快捷导航 </span>
          <span class="my-btn" @click="showDrawer=true">添加</span>
        </div>
        <ul class="home-top-bd ">
          <li v-for="(item,index) in mynavList" @click="go(item.url)">{{item.name}}</li>
        </ul>
      </div>
      <div class="home-bottom">
        <div class="home-bottom-hd"> 统计模块</div>
        <ul class="home-bottom-bd">
          <li @click="go('/users')">
            <div class="icon">
              <UserOutlined />
            </div>
            <div class="total">
              <span>{{totalRes.authTotal}}</span>
              <span>用户</span>
            </div>
          </li>
          <li @click="go('/todolist')">
            <div class="icon">
              <ScheduleOutlined />
            </div>
            <div class="total">
              <span>{{totalRes.todoTotal}}</span>
              <span>待办</span>
            </div>
          </li>
          <li @click="go('/products')">
            <div class="icon">
              <DeploymentUnitOutlined />
            </div>
            <div class="total">
              <span>{{totalRes.personalDetailTotal}}</span>
              <span>员工</span>
            </div>
          </li>
          <li @click="go('/clientinfo')">
            <div class="icon">
              <SmileOutlined />
            </div>
            <div class="total">
              <span>{{totalRes.customerTotal}}</span>
              <span>客户</span>
            </div>
          </li>
          <li @click="go('/clientlife')">
            <div class="icon">
              <SmileOutlined />
            </div>
            <div class="total">
              <span>{{totalRes.projectTotal}}</span>
              <span>项目</span>
            </div>
          </li>
        </ul>
      </div>
      <!-- 小工具合集  时间 天气  热点新闻-->
      <div class="home-tool">
        <div class="home-tool-hd">
          <!-- <span>小功能</span> -->
        </div>
        <div class="home-tool-bd">
          <!-- <div class="home-tool-bd-left">
            <span class="title">天气查询</span>
            <div class="search">
              <a-input placeholder="请输入查询的城市" v-model:value="city" />
              <button class="search-btn" @click="queryWeather"> 搜 索</button>
            </div>
            <div class="hotkey">
              <a href="javascript:;" v-for="(item,index) in hotCitys" :key="index" @click="clickSearch(item)">{{ item }}</a>
            </div>
            <ul class="search-res">
              <li v-for="(item,index) in searchList">
                <div class="info_type">
                  <span class="iconfont">{{ item.type }}</span>
                </div>
                <div class="info_temp">
                  <b>{{ item.low}}</b>
                  ~
                  <b>{{ item.high}}</b>
                </div>
                <div class="info_date">
                  <span>{{ item.date }}</span>
                </div>
              </li>
            </ul>
            <div class="note" v-if="note"> 温馨提示：{{note}}</div>
          </div> -->
          <div class="home-tool-bd-right">
            <!-- <span class="title">时间</span> -->
            <div class="time"> {{showTime||"00:00:00"}}</div>
          </div>
        </div>
      </div>
    </a-card>

    <a-drawer width="600"  title="快捷导航" placement="right" :closable="false" v-model:visible="showDrawer" :after-visible-change="afterVisibleChange">
      <ul class="drawer-nav">
        <li v-for="(item,index) in navList" :key="index" @click="navItemClick(item)">{{item.name}}</li>
      </ul>
      <div class="mynav">
        <div class="mynav-hd">
          <h2>我的导航</h2>
          <span class="my-btn" @click="addNavList">确定添加</span>
        </div>
        <ul class="mynav-bd">
          <li v-for="(item,index) in mynavList" :key="index" @click="remove(item,index)">{{item.name}}</li>
        </ul>
      </div>
    </a-drawer>
  </div>
</template>

<script>
import { defineComponent, onMounted, onUnmounted, ref } from "vue";
import { useRouter } from "vue-router";
import { home } from "../service/index";
import store from "../store/index";
import {
  UserOutlined,
  ScheduleOutlined,
  SmileOutlined,
  DeploymentUnitOutlined,
} from "@ant-design/icons-vue";
import axios from "axios";
import { message } from "ant-design-vue";
import { timeTransfer, timeTransferToTime } from "../utils/timeTransfer";
export default defineComponent({
  components: {
    UserOutlined,
    ScheduleOutlined,
    SmileOutlined,
    DeploymentUnitOutlined,
  },
  setup() {
    const router = useRouter();
    const go = (url) => {
      router.push(url);
    };
    const userId = ref("");
    const totalRes = ref({});
    const getTotal = async () => {
      const res = await home.list(userId.value);
      if (res.data.code == 200) {
        totalRes.value = res.data.data;
      }
    };
    onMounted(() => {
      userId.value = store.state.userInfo._id;
      getTotal();
    });

    const showDrawer = ref(false);
    //切换抽屉时动画结束后的回调
    const afterVisibleChange = (bool) => {
      console.log("visible", bool);
    };
    const navList = ref([]);
    onMounted(() => {
      axios.get("data/navigation.json").then((res) => {
        navList.value = res.data.result;
      });
    });
    const mynavList = ref([]);
    const navItemClick = (item) => {
      console.log("navItemClick", item);
      mynavList.value.push(item);
      console.log("mynavList", mynavList.value);
    };
    //移除导航
    const remove = (item, index) => {
      mynavList.value.splice(index, 1);
      console.log("mynavList.value.splice", mynavList.value);
    };
    //向数据库添加导航数据
    const addNavList = async () => {
      const res = await home.addnav(userId.value, mynavList.value);
      if (res.data.code == 200) {
        showDrawer.value = false;
        message.success("更新成功");
      }
    };
    onMounted(() => {
      getNavList();
    });
    const getNavList = async () => {
      const res = await home.getnav(userId.value);
      if (res.data.code == 200) {
        console.log("getNavList_res", res.data.data.navList);
        mynavList.value = res.data.data.navList;
      }
    };

    /**天气查询 */
    const city = ref(""); //查询的城市
    const note = ref("");
    const hotCitys = ref(["北京", "上海", "广州", "深圳"]);
    const searchList = ref([]); //查询结果
    const clickSearch = (item) => {
      city.value = item;
      queryWeather();
    };
    const queryWeather = () => {
      console.log("天气查询", city.value);
      axios
        .get(`http://wthrcdn.etouch.cn/weather_mini?city=${city.value}`)
        .then((res) => {
          console.log("queryWeather", res);
          searchList.value = res.data.data.forecast;
          note.value = res.data.data.ganmao;
        });
    };

    /**时间 */
    const showTime = ref("");
    let timer = null;
    onMounted(() => {
      timer = setInterval(() => {
        showTime.value = timeTransferToTime(new Date());
      }, 1000);
    });
    onUnmounted(() => {
      // console.log('调用timer_销毁');
      clearInterval(timer);
    });
    return {
      go,
      totalRes,
      showDrawer,
      afterVisibleChange,
      navList,
      navItemClick,
      mynavList, //最终显示首页的
      remove,
      addNavList,
      //天气查询
      city,
      note,
      hotCitys,
      clickSearch,
      queryWeather,
      searchList,
      //时间
      showTime,
      timeTransferToTime,
    };
  },
});
</script>

<style lang="less" scoped>
@font-size-base:24px;

.home {
  /**快捷导航 */
  .home-top {
    .home-top-hd {
      font-size: @font-size-base;
      font-weight: bold;
      display: flex;
      justify-content: space-between;
    }
    .home-top-bd {
      margin-top: 20px;
      margin-bottom: 20px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      li {
        margin-bottom: 10px;
        width: 13%;
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 20px;
        // color: #fff;
        font-size: 18px;
        color: #777;
        font-weight: bold;
        box-shadow: 10px 10px 8px #efefef;
        background: #c6ffdd;
        background: -webkit-linear-gradient(to left, #f7797d, #fbd786, #c6ffdd);
        background: linear-gradient(to left, #f7797d, #fbd786, #c6ffdd);
      }
    }
  }
  /**统计模块 */
  .home-bottom {
    .home-bottom-hd {
      font-size: @font-size-base;
      font-weight: bold;
      margin-bottom: 20px;
    }
    .home-bottom-bd {
      display: flex;
      li {
        display: flex;
        width: 20%;
        min-height: 80px;
        border: 1px solid #efefef;
        box-shadow: 10px 8px 10px #efefef;
        margin-right: 20px;
      
        font-size: @font-size-base;
        .icon {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 30%;
          font-size: 30px;
        }
        .total {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          padding-top: 10px;
          span:nth-child(1) {

            font-size: 30px;
          }
        }
        &:nth-child(1) .icon {
          color: #fff;
          background: #df7939;
        }
        &:nth-child(2) .icon {
          color: #fff;
          background: #e9c41e;
        }
        &:nth-child(3) .icon {
          color: #fff;
          background: #36c27c;
        }
        &:nth-child(4) .icon {
          color: #fff;
          background: #e33547;
        }
        &:nth-child(5) .icon {
          color: #fff;
          background: #2f7cc8;
        }
      }
    }
  }
  /**我的工具 */
  .home-tool {
    .home-tool-hd {
      margin-top: 20px;
      margin-bottom: 10px;
      font-weight: bold;
      font-size: @font-size-base;
    }
    .home-tool-bd {
      display: flex;
      /**天气查询 */
      .home-tool-bd-left {
        box-shadow: 0px 0px 1px #84a7c9, 2px 1px 18px #b2e1ff;
        padding: 20px;
        height: 400px;
        flex: 1;
        margin-right: 10px;
        .title {
          color: #efefef;
          padding: 10px;
          border-radius: 20px;
          background: linear-gradient(145deg, #8cb0d5, #a6d2fe);
          box-shadow: 20px 20px 60px #84a7c9, -20px -20px 60px #b2e1ff;
        }
        .search {
          margin-top: 20px;
          display: flex;
          :deep(.ant-input) {
            width: 300px;
            border-radius: 0px;
          }
          .search-btn {
            color: #fff;
            background: linear-gradient(145deg, #8cb0d5, #a6d2fe);
            border: none;
            cursor: pointer;
          }
        }
        .hotkey {
          margin-top: 6px;
          a {
            margin-right: 5px;
            color: #2f7cc8;
          }
        }
        .search-res {
          display: flex;
          li {
            flex: 1;
          }
        }
        .note {
          margin-top: 8px;
          padding: 6px;
          border-radius: 18px;
          color: #fff;
          background: linear-gradient(145deg, #8cb0d5, #a6d2fe);
        }
      }
      /**时间 */
      .home-tool-bd-right {
        flex: 1;
        padding: 20px;
        margin-right: 10px;
        height: 400px;
        box-shadow: 0px 0px 1px #96656a, 0px 0px 16px #cc8990;

        .title {
          padding: 10px;
          color: #efefef;
          border-radius: 20px;
          background: linear-gradient(145deg, #9f6b71, #bd7f86);
          box-shadow: 0px 0px 0px #96656a, 6px 2px 10px #cc8990;
        }
        .time {
          text-align: center;
          padding-top: 80px;
          font-size:60px;
          font-weight: bold;
          color: #bd7f86;
          text-shadow: 0px 0px 0px #96656a, 6px 2px 10px #cc8990;
        }
      }
    }
  }
}

/**抽屉 */
.drawer-nav,
.mynav-bd {
  display: flex;
  flex-wrap: wrap;

  li {
    margin-right: auto;
    width: 22%;
    height: 60px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    // color: #efefef;
    color: #777;
    font-size: @font-size-base;
    border-radius: 44px;
    background: linear-gradient(315deg, #cebcbc, #f5e0e0);
    box-shadow: -8px -8px 16px #d5c2c2, 8px 8px 16px #f5e0e0;
  }
}
/**我的导航 */
.mynav {
  .mynav-hd {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    h2 {
      font-size: @font-size-base;
    }
  }
}
.my-btn {
  cursor: pointer;
  padding: 10px;
  color: #777;
  border-radius: 20px;
  background: #c4e1c5;
  box-shadow: 20px 20px 60px #a7bfa7, -20px -20px 60px #e1ffe3;
}
</style>